<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="geometry" content="polygon">
  <link rel="stylesheet" href="./assets/common.css">
  <title>World map</title>
</head>

<body>
<div id="canvas"></div>
<script src="./assets/jquery-3.2.1.min.js"></script>
<script src="./assets/data-set.min.js"></script>
<script src="../build/g2.js"></script>
<script>
$.getJSON('./data/world.geo.json', data => {
  const ds = new DataSet();
  const dv = ds.createView('back')
    .source(data, {
      type: 'GeoJSON'
    });
  const userData = [
    { name: 'Russia', value: 86.8 },
    { name: 'China', value: 106.3 },
    { name: 'Japan', value: 94.7 },
    { name: 'Mongolia', value: 98 },
    { name: 'Canada', value: 98.4 },
    { name: 'United Kingdom', value: 97.2 },
    { name: 'United States of America', value: 98.3 },
    { name: 'Brazil', value: 96.7 },
    { name: 'Argentina', value: 95.8 },
    { name: 'Algeria', value: 101.3 },
    { name: 'France', value: 94.8 },
    { name: 'Germany', value: 96.6 },
    { name: 'Ukraine', value: 86.3 },
    { name: 'Egypt', value: 102.1 },
    { name: 'South Africa', value: 101.3 },
    { name: 'India', value: 107.6 },
    { name: 'Australia', value: 99.9 },
    { name: 'Saudi Arabia', value: 130.1 },
    { name: 'Afghanistan', value: 106.5 },
    { name: 'Kazakhstan', value: 93.4 },
    { name: 'Indonesia', value: 101.4 }
  ];
  const userDv = ds.createView()
    .source(userData)
    .transform({
      geoDataView: dv,
      field: 'name',
      type: 'geo.centroid',
      as: [ 'longitude', 'latitude' ]
    });
  const chart = new G2.Chart({
    id: 'canvas',
    forceFit: true,
    height: 500
  });
  chart.scale({
    longitude: {
      sync: true
    },
    latitude: {
      sync: true
    }
  });
  chart.axis(false);
  chart.legend(false);
  chart.tooltip({
    showTitle: false
  });
  const bgView = chart.view();
  bgView.source(dv);
  bgView.tooltip(false);
  bgView.polygon().position('longitude*latitude')
    .color('p(a)https://gw.alipayobjects.com/zos/rmsportal/saXlaNQvHJitoVVLZWde.png')
    .style({
      lineWidth: 0
    })
    .active(false);
  const userView = chart.view();
  userView.source(userDv);
  userView.point().position('longitude*latitude').color('name')
    .size('value', [ 2, 20 ])
    .shape('circle');
  chart.render();
});
</script>
</body>
</html>

